<script setup lang="ts">
import type {TabsEmits, TabsProps} from './types';

import {useForwardPropsEmits} from '@/composables';
import {ChevronLeft, ChevronRight} from '@/plugins/iconify/core';
import {JcxScrollbar} from '@/components/common/shadcn';

import {Tabs, TabsChrome} from './components';
import {useTabsDrag} from './use-tabs-drag';
import {useTabsViewScroll} from './use-tabs-view-scroll';

interface Props extends TabsProps {
}

defineOptions({
  name: 'TabsView',
});

const props = withDefaults(defineProps<Props>(), {
  contentClass: 'jcx-tabs-content',
  draggable: true,
  styleType: 'chrome',
  wheelable: true,
});

const emit = defineEmits<TabsEmits>();

const forward = useForwardPropsEmits(props, emit);

const {
  handleScrollAt,
  handleWheel,
  scrollbarRef,
  scrollDirection,
  scrollIsAtLeft,
  scrollIsAtRight,
  showScrollButton,
} = useTabsViewScroll(props);

function onWheel(e: WheelEvent) {
  if (props.wheelable) {
    handleWheel(e);
    e.stopPropagation();
    e.preventDefault();
  }
}

useTabsDrag(props, emit);
</script>

<template>
  <div class="flex h-full flex-1 overflow-hidden">
    <!-- 左侧滚动按钮 -->
    <span
        v-show="showScrollButton"
        :class="{
        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtLeft,
        'pointer-events-none opacity-30': scrollIsAtLeft,
      }"
        class="border-r px-2"
        @click="scrollDirection('left')"
    >
      <ChevronLeft class="size-4 h-full"/>
    </span>

    <div
        :class="{
        'pt-[3px]': styleType === 'chrome',
      }"
        class="size-full flex-1 overflow-hidden"
    >
      <JcxScrollbar
          ref="scrollbarRef"
          :shadow-bottom="false"
          :shadow-top="false"
          class="h-full"
          horizontal
          scroll-bar-class="z-10 hidden "
          shadow
          shadow-left
          shadow-right
          @scroll-at="handleScrollAt"
          @wheel="onWheel"
      >
        <TabsChrome
            v-if="styleType === 'chrome'"
            v-bind="{ ...forward, ...$attrs, ...$props }"
        />

        <Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }"/>
      </JcxScrollbar>
    </div>

    <!-- 右侧滚动按钮 -->
    <span
        v-show="showScrollButton"
        :class="{
        'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtRight,
        'pointer-events-none opacity-30': scrollIsAtRight,
      }"
        class="hover:bg-muted text-muted-foreground cursor-pointer border-l px-2"
        @click="scrollDirection('right')"
    >
      <ChevronRight class="size-4 h-full"/>
    </span>
  </div>
</template>
